<!--
 * @Date: 2023-02-09 10:50:45
 * @LastEditTime: 2023-02-23 09:50:48
 * @FilePath: /hash-guess-game/src/views/home/components/gameStrategy.vue
 * 介绍:游戏攻略
-->
<script lang="ts" setup>
import { _require } from "@@/utils/tools/tools";
import CardGlass from "@@/components/CardGlass/CardGlass.vue";
</script>

<template>
  <h4 style="margin: var(--gap-md) 0">{{ $t("you-xi-gong-lve") }}</h4>
  <div class="gard-card">
    <CardGlass @click="$router.push({ name: 'gameStrategyLucky' })" class="active">
      <div class="CardGlass_strategy">
        <Mimage
          class="gard-card_img"
          :src="_require('src/assets/img/sai-che/sai-che_1.png')"
        />
        <div class="gard-card_text">{{ $t("xing-yun") }}</div>
      </div>
    </CardGlass>
    <CardGlass @click="$router.push({ name: 'gameStrategyParity' })" class="active">
      <div class="CardGlass_strategy">
        <Mimage
          class="gard-card_img"
          :src="_require('src/assets/img/sai-che/sai-che_2.png')"
        />
        <div class="gard-card_text">{{ $t("qi-ou") }}</div>
      </div>
    </CardGlass>
  </div>
</template>

<style lang="less" scoped>
.gard-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-md);
  .CardGlass_strategy {
    position: relative;
    padding: var(--gap-md) 0;
    .gard-card_text {
      position: absolute;
      right: var(--gap-sm);
      bottom: 0;
    }
  }
}
</style>
